import React, {Component} from 'react'
import {List, Button, Radio} from 'antd-mobile'
import CInput from '../../components/c_input'
import { createForm } from 'rc-form'
import {modal, post} from '../../common/js/utils'

const RadioItem = Radio.RadioItem

@createForm()
class Register extends Component {

  state = {
    sex: 1
  }

  onSubmit = (e) => {
    if (e.keyCode === 13) {
      this.doRegister()
    }
  }

  doRegister = () => {
    this.props.form.validateFields((errors, values) => {
      const form = Object.assign({}, values)
      form.sex = this.state.sex
      if (!errors) {
        post('/users/register', form, loading => { modal.loading(loading) }).then(res => {
          if (res.result === 1) {
            window.location.reload()
          }
        }).catch(() => {})
      }
    })
  }

  render() {
    const { getFieldValue } = this.props.form
    const { sex } = this.state
    return (
      <div>
        <List renderHeader={'基本信息'}>
          <CInput
            form={this.props.form}
            rules={[{
              required: true,
              message: '请输入用户名'
            }]}
            placeholder={'请填写用户名作为你的登录账号'}
            name={'username'}
            clear
          >用户名：</CInput>
          <CInput
            form={this.props.form}
            rules={[{
              required: true,
              message: '请输入昵称'
            }]}
            placeholder={'请填写昵称'}
            name={'nickname'}
            clear
          >昵称：</CInput>
          <CInput
            form={this.props.form}
            rules={[{
              required: false,
              message: '请填写年龄'
            }, {
              validator: (rule, value, callback, source, options) => {
                if (!value) return callback()
                if (/^[1-9]\d*$/.test(value)) {
                  callback()
                } else {
                  callback(new Error('年龄格式不正确'))
                }
              }
            }]}
            placeholder={'请填写年龄'}
            name={'age'}
            clear
          >年龄：</CInput>
        </List>
        <List renderHeader={'性别'}>
          <RadioItem
            checked={sex === 1}
            onChange={() => this.setState({ sex: 1 })}
          ><i style={{color: 'rgb(117, 185, 235)'}} className="riconfont ricon-nan" />  男</RadioItem>
          <RadioItem
            checked={sex === 0}
            onChange={() => this.setState({ sex: 0 })}
          ><i style={{color: 'rgb(255, 62, 201)'}} className="riconfont ricon-nv" />  女</RadioItem>
        </List>
        <List renderHeader={'设置密码'}>
          <CInput
            form={this.props.form}
            rules={[{
              required: true,
              message: '请输入密码'
            }]}
            type={'password'}
            placeholder={'请填写密码'}
            name={'password'}
            clear
          >密码：</CInput>
          <CInput
            form={this.props.form}
            rules={[{
              required: true,
              message: '请再次填写密码'
            }, {
              validator: (rule, value, callback, source, options) => {
                const password = getFieldValue('password')
                if (password === value) {
                  callback()
                } else {
                  callback(new Error('两次密码输入不一致'))
                }
              }
            }]}
            type={'password'}
            placeholder={'请再次填写密码'}
            name={'repassword'}
            onKeyDown={this.onSubmit}
            clear
          >重复密码：</CInput>
          <div
            style={{
              padding: 5
            }}
          >
            <Button
              onClick={this.doRegister}
              type={'primary'}
              size={'large'}
            >注册并登录</Button>
          </div>
        </List>
      </div>
    )
  }
}

export default Register
